<template>
  <div class="dialog">
    <div class="dialog-header">header</div>
    <div class="dialog-main">
      <div v-for="(item, index) in dataList" :key="index">
        {{ item.name }}
      </div>
    </div>
    <div class="dialog-footer">footer</div>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'

interface data {
  name: string
}
const dataList = reactive<data[]>([
  { name: 'Tom1' },
  { name: 'Tom2' },
  { name: 'Tom3' },
  { name: 'Tom4' },
])
</script>
<style scoped lang="less">
.dialog {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 200px;
  width: 200px;
  margin-left: -100px;
  margin-top: -100px;
  border: 1px solid black;
  background-color: lightblue;
  &-header {
    flex: 1;
    border-bottom: 1px solid black;
  }
  &-main {
    flex: 4;
    border-bottom: 1px solid black;
  }
  &-footer {
    flex: 1;
  }
}
</style>
